import React from 'react';
import { List, Switch } from 'antd-mobile';
import './SettingsList.css';
import { useNavigate } from 'react-router-dom';

const SettingsList: React.FC = () => {
  
  const [darkModeEnabled, setDarkModeEnabled] = React.useState(false);
  const navigate = useNavigate();
  const switchStyle = {
    '--checked-color': '#e39a33ff',
    '--height': '3.8vh',
    '--width': '13vw',
  };
  const settings = [
    { title: '帮助中心' },
    { 
      title: '密码锁', 
      action: <Switch style={switchStyle} checked={darkModeEnabled} onChange={setDarkModeEnabled} /> 
    },
   
  ];
  return (
    <div className="settings-list-container">
      <List className="settings-list">
        {settings.map((setting, index) => (
          <List.Item
            key={index}
            className="settings-item"
            onClick={() => setting.title === '帮助中心' && navigate('/index/profile/help')}
          >
            <div className="setting-title">
              {setting.title}
              {setting.action}
            </div>
          </List.Item>
        ))}
      </List>
    </div>
  );
};
export default SettingsList;